<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="发布评价"></uni-nav-bar>

		<view class='issue'>

			<textarea @blur="blur" :value="editForm.evalContent" :placeholder="textareaPlaceholder"/>

			<view class="issue-head">
				<slot name="headPic"></slot>
				<image src="/static/image/icon/st_pic.png" class="issue-head-pic" mode=""></image>
				<text class="issue-head-title">描述相符</text>
				<view class="issue-head-star-box">
					<uni-rate v-model="editForm.evalLevel" @change="onChange" size="40" margin="10"></uni-rate>
				</view>
			</view>

			<view class="issue-btn-box">
				<button class="submit-btn" type="primary" @click="doSubmit">提交</button>
				<slot name="submit"></slot>
			</view>
		</view>
	</view>
</template>
<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'

	export default {
		components: {
            uniRate
		},
		data() {
			return {
                id: undefined,
                textareaPlaceholder: '宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧',
                editForm: {
                    evalLevel: 0,
                    evalContent: '',
                    status: 0
                },
                flag: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.flag = option.flag
		},
		methods: {
            onChange(e) {
                this.editForm.evalLevel = e.value
            },
            blur(e){
                console.log(e)
                this.editForm.evalContent = e.detail.value
            },
            doSubmit() {
                this.editForm = {
                    ...this.editForm,
                    orderId: this.id
                }
                this.$api.api('eval.add',this.editForm).then(res => {
                    if (res.code == 200) {
                        this.$api.msg('发布成功')
                        this.editForm = {}
                        uni.navigateTo({
							url:'/pagesA/notice/successStatus'
						})
                    } else {
                        this.$api.msg(res.message)
                    }
                })
            },
		}
	}
</script>
<style lang="scss" scoped>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;

	.issue {
		margin-top: 3rpx;

		&-head{
			background-color: $white;
			border-top: 1upx solid $borderColor;
			padding: 0 25upx;
			display: flex;
			align-items: center;

			&-pic{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}

			&-star-box{
				display: inline-block;

				image{
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}
				image.active{
					animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
				}
			}
		}
		textarea{
			width: 100%;
			height: 420upx;
			background-color: $white;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx;
			border-top: 2rpx solid #eee;
		}
		.uni-textarea-placeholder {
			color: #999;
		}
		&-btn-box{
			padding: 54upx 30upx;

			button{
				border-radius: 80upx;
				background-color: $uni-color-success;
			}
		}
	}
</style>